<template>
	<z-paging ref="paging" v-model="dataList" @query="queryList" safe-area-inset-bottom>
	<view class="content p15" style="padding-bottom: 40rpx;">
		
		<view class="tz-card" v-for="(item,index) in dataList" :key="index" @click="desc(item.id)"
			style="padding: 30rpx 20rpx 116rpx 20rpx;">
			<view style="display: flex;align-items:center;">
				<view>
						 <image class="avatar" src="../../static/logo.png"></image>
				</view>
				<view>
					<view class="name f15">
						{{item.tzr_name}}
					</view>
					<view class="time f12" style="margin-top: 4rpx;">
						{{item.createtime}}
					</view>
				</view>
			</view>
			<view style="width: 100%;">
				<view class="flexb" style="margin: 10rpx 0;">
					<view class="adress f14 row1">{{item.abs}}</view>
					<img class="lianjie" src="../../static/icon/lianjie.png" alt="">
				</view>
				<view class="f13 row2">{{item.subject}}</view>
			</view>
			<view class="detail f15">查看详情({{item.is_read==1?'已确认':'未确认'}})</view>
		</view>
		
	</view>
	</z-paging>
</template>

<script>
	import helper from '../../common/helper.js';
	import api from '../../common/api.js';
	export default {
		data() {
			return {
				list: [],
				dataList: [],
				quesForm: {
					pageNum: '',
					pageSize: 10
				},
			}
		},
		onLoad() {
			let token = helper.getUserToken();
			if (token == '') {
				uni.redirectTo({
					url: '/pages/login/login'
				})
			}

		},
		onShow() {
		},
		methods: {
			queryList(pageNo, pageSize) {
				let self = this;
				self.quesForm.pageNum = pageNo
				self.quesForm.pageSize = pageSize
				api.message_list(self.quesForm).then((res) => {
					console.log('res', res)
					this.$refs.paging.complete(res.data);
				}).catch((err) => {
					console.log('err', err)
					this.$refs.paging.complete(false);
				})
			},
			//进入详情
			desc(id) {
				uni.navigateTo({
					url: '/pages/mine/order_desc?id=' + id
				})
			}
		}
	}
</script>

<style scoped>
	.tz-card {
		background-color: #ffffff;
		margin-top: 20rpx;
		border-radius: 20rpx;
		position: relative;
		overflow: hidden;
	}

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 8rpx;
		margin-right: 20rpx;
	}

	.name {
		font-weight: bold;
		letter-spacing: 2rpx;
	}

	.time {
		color: #8E8E8E;
	}

	.adress {
		color: #8E8E8E;
	}

	.lianjie {
		width: 36rpx;
		height: auto;
	}
/* 已确认 */
	.detail {
		text-align: center;
		height: 68rpx;
		line-height: 68rpx;
		background: #3476FE;
		color: #ffffff;
		font-size: 24rpx;
		margin-top: 34rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 42%;
		border-top-left-radius: 20rpx;
	}

	/* 未确认 */
	.detail1 {
		text-align: center;
		height: 68rpx;
		line-height: 68rpx;
		background: #F1EFF4;
		color: #ffffff;
		font-size: 24rpx;
		margin-top: 34rpx;
		position: absolute;
		right: 0;
		bottom: 0;
		width: 42%;
		border-top-left-radius: 20rpx;
	}

	.otherbtn {
		font-size: 24rpx;
		width: 120rpx;
		color: #8E8E8E;
		margin-top: 14rpx;
	}
</style>










<!-- <template>
  <view class="index">
    <view class="nav">
      <text class="t2" :class="{ t1: map.status == 'all' }" @tap="setMap('status', 'all')">全部</text>
      <text class="t2" :class="{ t1: map.status == 2 }" @tap="setMap('status', 2)">进行中</text>
      <text class="t2" :class="{ t1: map.status == 3 }" @tap="setMap('status', 3)">待支付</text>
      <text class="t2" :class="{ t1: map.status == 99 }" @tap="setMap('status', 99)">已完成</text>
    </view>
    <view class="center">
      <view class="orders" v-if="order.total > 0" v-for="(v, i) in order.data" :key="i" @tap="navigateTo('/pages/taxiService/taxiService?action=order&order_id=' + v.id)">
        <view class="top">
          <view class="input">
            <text class="icon gray">&#xe77c;</text>
            <text class="time">{{ v.createtime | date }}</text>
          </view>
          <text class="more icon gray">{{ v.status_text }}&#xe60f;</text>
        </view>
        <view class="left">
          <view class="input">
            <text class="icon green">&#xe608;</text>
            <text class="address">{{ v.start }}</text>
          </view>
          <view class="input">
            <text class="icon orange">&#xe608;</text>
            <text class="address">{{ v.end }}</text>
          </view>
        </view>
        <view class="right">￥{{ v.price }}元</view>
      </view>
    </view>
  </view>
</template>

<script>
import helper from '../../common/helper.js';
import api from '../../common/api.js';
export default {
  data() {
    return {
      map: {
        status: 'all',
        page: 1
      },
      order: {}
    };
  },
  filters: {
    date: value => {
      let date = new Date(value * 1000);
      let h = date.getHours();
      let m = date.getMinutes();
      return (h > 9 ? h : '0' + h) + ':' + (m > 9 ? m : '0' + m);
    }
  },
  onShow() {
    this.getList();
  },
  methods: {
    async getList() {
      let res = await api.getOrderList(this.map);
      this.order = res.data;
      uni.stopPullDownRefresh();
    },
    onPullDownRefresh() {
      this.map.page = 1;
      this.getList();
    },
    onReachBottom() {
      if (this.info.last_page > this.info.current_page) {
        this.getList();
      }
    },
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    },
    setMap(key, value) {
      this.map[key] = value;
      this.map.page = 1;
      this.getList();
    }
  }
};
</script>

<style lang="scss" scoped>
page,
.index {
  height: 100%;
  background-color: #fbfbfb;
}
.center {
  padding: 30upx;
}
.center1 {
  padding: 30upx;
}
.nav {
  display: flex;
  padding: 20upx;
  font-size: 28upx;
  background-color: #ffffff;
  .t1 {
    width: 48%;
    text-align: center;
    color: #32c45e;
  }
  .t2 {
    width: 48%;
    text-align: center;
  }
  .icon {
    font-size: 30upx;
  }
}
.orders {
  margin-bottom: 30upx;
  display: flex;
  padding: 20upx 20upx;
  border-radius: 10upx;
  box-shadow: 1px 1px 1px 1px #eaeaea;
  align-items: center;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  .icon {
    font-size: 48upx;
  }
  .top {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 24upx;
    .input {
      display: flex;
      align-items: center;
      color: #999999;
    }
    .more {
      font-size: 28upx;
    }
  }
  .left {
    width: 80%;
    .input {
      width: 100%;
      padding: 6upx 0;
      display: flex;
      align-items: center;
      .time {
        width: 70%;
        font-size: 25upx;
        color: #979797;
      }
      .address {
        width: 70%;
        font-size: 26upx;
      }
    }
  }
  .right {
    width: 20%;
    font-size: 26upx;
    color: #e51c23;
    button {
      width: 60%;
      background-color: #32c45e;
      margin-top: 20upx;
      border-radius: 50upx;
      padding: 0 10upx;
      font-size: 22upx;
    }
  }
}

.bottom {
  background-color: #ffffff;
  position: absolute;
  width: 100%;
  bottom: 0;
  height: 120upx;
  display: flex;
  align-items: center;
  justify-content: space-around;
  .item {
    display: flex;
    flex-direction: column;
    width: 33.33%;
    align-items: center;
    font-size: 24upx;
    .icon {
      font-size: 56upx;
      color: #999999;
    }
  }
}
.active {
  color: #32c45e !important;
  .icon {
    color: #32c45e !important;
  }
}
</style>
 -->
